<!-- All VizAPI required files are loaded dynamically through the webcontext.js include, below -->
<script>
  // Undefine define/require shim used by CDF,
  // to let a real define/require implementation be installed through webcontext.js
  delete define; delete require;
</script>
<script src="webcontext.js?context=mantle&amp;requireJsOnly=true&amp;application=pentaho/cdf"></script>

<div class="shadow">

  <div class="contents">

    <h2>VisualizationAPIComponent</h2>

    <h3>Description</h3>
    <p>
      This is a component that can execute visualizations that are registered in Pentaho Visualization API.
    </p>

    <h3>Options</h3>

    <dl class="documentation">
      <dt>name</dt>
      <dd>The name of the component</dd>

      <dt>type</dt>
      <dd><code>visualizationAPIComponent</code></dd>

      <dt>vizId</dt>
      <dd>Id of the visualization to be rendered</dd>

      <dt>listeners</dt>
      <dd><i>Array - </i> Parameters who this component will react to</dd>

      <dt>vizOptions</dt>
      <dd><i>Array - </i>Parameters to pass as options to the visualization. This includes visual roles and other options
        for the visualization</dd>

      <dt>queryDefinition</dt>
      <dd>MetaLayer object with the query definition (see MetaLayer options)</dd>

      <dt>htmlObject</dt>
      <dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

      <dt>refreshPeriod</dt>
      <dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

      <dt>executeAtStart</dt>
      <dd>True to execute the component at start, false otherwise</dd>

      <dt>tooltip</dt>
      <dd>Tooltip to be displayed when mouse hovers</dd>

      <dt>preExecution</dt>
      <dd><i>Function - </i> Function to be called before the component is executed</dd>

      <dt>postExecution</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>preChange</dt>
      <dd><i>Function - </i> Function to be called before the component is executed. The component will be executed only if the result of preChange equals true.</dd>

      <dt>postChange</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>height</dt>
      <dd>Display Height of the visualization - this is a required argument</dd>

      <dt>width</dt>
      <dd>Display Width of the visualization - this is a required argument</dd>


    </dl>

    <h3>MetaLayer options</h3>

    <dl class="documentation">
      <dt>queryType</dt>
      <dd>Type of query to read results from. Can be sql or mdx. Default: mdx</dd>

      <dt>jndi</dt>
      <dd>Connection to use for the query</dd>

      <dt>query</dt>
      <dd>sql or mdx Query to execute</dd>

      <dt>cube</dt>
      <dd>Cube name to use when queryType is mdx</dd>

      <dt>catalog</dt>
      <dd>Mondrian schema to use when queryType is mdx</dd>

    </dl>

    <h3>Sample</h3>

    <div id="example" class="flora">
      <ul>
        <li><a href="#sample"><span>Sample</span></a></li>
        <li><a href="#code"><span>Code</span></a></li>
      </ul>
      <div id="sample">
        <div id="selectorObject"></div>
        <div id="sampleObject" style="height:530px"></div>
        <br/>
      </div>

      <div id="code">
        <textarea cols="80" rows="20" id="samplecode">
require([
  'cdf/Dashboard.Blueprint',
  'cdf/components/VisualizationAPIComponent'
], function(Dashboard, VisualizationAPIComponent) {

  var dashboard = new Dashboard();

  dashboard.setParameter("optionParam", "max");
  dashboard.setParameter("levelsParam", {fields: ["Country"]});
  dashboard.setParameter("measureParam", {fields: ["Quantity"]});


  dashboard.addComponent(new VisualizationAPIComponent({
    name: "sampleVisualization",
    type: "visualizationAPIComponent",
    listeners: [],
    queryDefinition: {
      dataAccessId: "viz-query",
      path: "/public/plugin-samples/pentaho-cdf/legacy/actions/data-for-samples.cda",
      opts: {}
    },
    vizId: "pentaho/visual/samples/calc/Model",
    height: 200,
    width: 400,
    vizOptions: [["operation", "optionParam"],["levels", "levelsParam"],["measure", "measureParam"]],
    htmlObject: "sampleObject",
    executeAtStart: true,
    postFetch: function(data) {
      // Using postFetch to convert data types, because the query is passing
      // a Numeric field as String and that breaks the sample visualization
      data.metadata[0].colName = "Country";

      data.metadata[1].colName = "Quantity";
      data.metadata[1].colType = "Numeric";
    }
  }));

  dashboard.init();

  dashboard.finishedInit = false;
});
                </textarea>
        <br/>
        <button id="tryMe">Try me</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3A30-documentation%3A30-component_reference%3Asamples.js"></script>
